<template>


  <el-container class="home">
    <!--头部-->
    <el-header class="ub main-justify cross-center header">
      <div class="header-left-text ">
        spring boot 开发小而完整的web前后端分离实战
      </div>
      <div class="ub main-center cross-center">
        <el-dropdown placement="bottom-start">
          <img class="user-img" src="../assets/images/avatar.jpg">
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <div class="user-role">
          <div class="wollcom">欢迎你,管理员</div>
          <div class="header-time">2020.11.23 14:20:25 星期二</div>
        </div>
      </div>
    </el-header>
    <el-container>
      <!--菜单栏-->
      <el-aside width="auto">
        <menu-bar></menu-bar>

      </el-aside>
      <!--右边内容显示区-->
      <el-container>
        <el-main style="padding: 0">
          <!--菜单收缩按钮-->
          <i class=" arrowIcon" :class="[isCollapse?'el-icon-s-unfold':'el-icon-s-fold']" @click.navite="iconClick"></i>
          <tabs></tabs>
          <router-view></router-view>
        </el-main>
        <!--  <el-footer>Footer</el-footer>-->
      </el-container>
    </el-container>
  </el-container>

</template>

<script>
/*<!--引入components组件-->*/
import MenuBar from "@/components/MenuBar";
import tabs from "../components/tabs.vue";
import {mapState} from 'vuex'

export default {
  name: 'Home',
  /*注册components组件*/
  components: {
    MenuBar,
    tabs
  },
  methods:{
    iconClick(){
      this.$store.commit('setOpenOrClose')
    }
  },
  computed:{
    ...mapState({
      isCollapse:state=>state.MenuStore.isCollapse
    })
  }

}
</script>
<style>
.el-tabs__header{
  position: static!important;
}

.arrowIcon {
  border: 1px solid transparent;
  font-size: 20px;
  float: left;
  height: 39px;
  width: 40px;
  background: #eaedf1;
  text-align: center;
  line-height: 39px !important;
}

.home {
  height: 100%;
}

.ub {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.main-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.cross-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}

.header {
  background-color: #167bd8;
  color: #fff;
}

.header-left-text {
  font-size: 20px;
}

.user-img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  cursor: pointer;
}

.user-role {
  margin-left: 10px;
}

.wollcom {
  font-size: 15px;
  font-weight: bolder;
}

.header-time {
  font-size: 14px;
}


.el-menu {
  border-right: none;
}
</style>
